import { Button } from "antd";
import FullSizeModal from "@/components/FullSizeModal";

type DetailDialogProps = {
  visible: boolean;
  onVisibleChange: (v: boolean) => void;
};

export function DetailDialog(props: DetailDialogProps) {
  const { visible, onVisibleChange } = props;

  const data: Record<string, string> = {
    a: "0001",
    b: "啊是的请问大师",
    c: "TH0001",
    d: "192.168.0.100",
  };

  const info = [
    { label: "设备编号", key: "a" },
    { label: "设备名称", key: "b" },
    { label: "设备型号", key: "c" },
    { label: "设备端口", key: "d" },
  ];
  return (
    <FullSizeModal visible={visible} onClose={() => onVisibleChange(false)}>
      <div className="px-20 pt-16">
        <div>
          <h2 className="mb-6">设备信息</h2>
          <div className="inline-grid grid-cols-2">
            {info.map((item) => (
              <div key={item.label} className="flex w-80">
                <span className="flex-none text-[#828282]">{item.label}</span>
                <span className="flex-auto text-center">{data[item.key]}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="mt-12">
          <h2 className="mb-6">检查</h2>
          <div>
            <div className="h-40 w-80 rounded bg-[#262626] px-6 py-12"></div>
          </div>
        </div>
        <div className="mt-16 flex justify-center gap-x-4">
          <Button className="w-80">运行</Button>
          <Button className="w-80">设置</Button>
        </div>
      </div>
    </FullSizeModal>
  );
}
